<template>
  <!--预算调整-->

  <div>
    <div>
      <el-row style="background: white">
        <el-col :span="24"><div class="tbUpDiv"><img src="src/public/imgs/36)0DHOK%25J39%25~%25H9%5DTFO%60I.png" class="tbImg"><span class="tbUpPost">预算调整
        </span>
          <router-link to='/budgettjjb'>
            <el-button color="#626aef" :dark="isDark" class="tjj-1">发起预算变更</el-button>
          </router-link>

          <router-link to='/budgettjjz'>
            <el-button color="#626aef" :dark="isDark" class="tjj-2">发起预算追加</el-button>
          </router-link>

        </div></el-col>
      </el-row>

      <el-row>
        <el-col>

          <div class="aaa">

            <div class="tj"><input class="tbScenAipt" placeholder="流程编号"></div>


            <div class="tbScenCdiv">
              <span>申请日期：</span>
              <el-select class="tbScenBipt" v-model="souForm.budgetrq" placeholder="请选择">
                <el-option label="今天" value="今天" />
                <el-option label="本周" value="本周" />
                <el-option label="本月" value="本月" />
                <el-option label="本季" value="本季" />
                <el-option label="本年" value="本年" />
                <el-option label="指定日期范围" value="指定日期范围" />
              </el-select>
            </div>

            <div class="tbScenCdiv">
              <span>调整类型</span>
              <el-select class="tbScenBipt" v-model="souForm.budgetlx"  placeholder="预算变更">
                <el-option label="预算变更" value="预算变更" />
                <el-option label="预算追加" value="预算追加" />

              </el-select>
            </div>


            <div class="tbScenCdiv">
              <span>调整金额：</span>
              <el-select class="tbScenBipt" v-model="souForm.budgetje"  placeholder="请选择">
                <el-option label="<=5000" value="<5000" />
                <el-option label="5000-10000" value="本周" />
                <el-option label=">1000" value="本月" />

              </el-select>
            </div>


            <div class="tbScenCdiv">
              <span>流程状态：</span>
              <el-select class="tbScenBipt" v-model="souForm.budgetzt"  placeholder="请选择">
                <el-option label="审批中" value="审批中" />
                <el-option label="已完成" value="本周" />


              </el-select>
            </div>




          </div>


        </el-col>
      </el-row>











      <el-tabs type="border-card" class="demo-tabs">

        <el-tab-pane label="审批中(5)" >
          <div class="picture" data-v-309cad06="">

            <div class="typeface" data-v-309cad06="">
              <el-row>
                <el-col>
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="booksId" type="selection" width="60"/>
                    <el-table-column prop="name" label="差旅流程" width="180" />
                    <el-table-column prop="sex" label="出行日期" width="180" />
                    <el-table-column prop="address" label="出发地" width="180" />
                    <el-table-column prop="where" label="目的地" width="180" />
                    <el-table-column prop="steta" label="订单类型" width="180" />
                    <el-table-column prop="timet" label="订单金额" width="180" />
                    <el-table-column prop="ddzt" label="订单状态" width="180" />
                  </el-table>
                </el-col>
              </el-row>
              <el-row justify="center">
                <el-col>
                  <el-pagination
                      v-model:currentPage="pageNo"
                      v-model:page-size="pageSize"
                      :page-sizes="[5,10, 20, 30, 40]"
                      small="small"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total"
                      @size-change="sizeChange"
                      @current-change="currentChange"/>
                </el-col>
              </el-row>
            </div></div>

        </el-tab-pane>
        <el-tab-pane label="已完成(0)">
          <el-row>
            <el-col>
              <el-table :data="tableDatat" style="width: 100%">
                <el-table-column prop="booksId" type="selection" width="60"/>
                <el-table-column prop="name" label="差旅流程" width="180" />
                <el-table-column prop="sex" label="出行日期" width="180" />
                <el-table-column prop="address" label="出发地" width="180" />
                <el-table-column prop="where" label="目的地" width="180" />
                <el-table-column prop="steta" label="订单类型" width="180" />
                <el-table-column prop="timet" label="订单金额" width="180" />
                <el-table-column prop="ddzt" label="订单状态" width="180" />
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane>

        <el-tab-pane label="全部(5)">
          <el-row>
            <el-col>
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="booksId" type="selection" width="60"/>
                <el-table-column prop="name" label="差旅流程" width="180" />
                <el-table-column prop="sex" label="出行日期" width="180" />
                <el-table-column prop="address" label="出发地" width="180" />
                <el-table-column prop="where" label="目的地" width="180" />
                <el-table-column prop="steta" label="订单类型" width="180" />
                <el-table-column prop="timet" label="订单金额" width="180" />
                <el-table-column prop="ddzt" label="订单状态" width="180" />
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane>

      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref, toRefs} from "vue";
const souForm=reactive({
  budgetrq:'',
  budgetlx:'',
  budgetje:'',
  budgetzt:'',


})

const hidddiv=ref(false)
const d = reactive({
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
});
const tableData = [
  {
    name: ' CLSQ2020010011',
    steta:'-',
    sex:'2022-10-01',
    where:'日本',
    address: '香港',
    timet:'1011',
    ddzt:'审批中',
  },
  {
    name: ' CLSQ2020010011',
    steta:'-',
    sex:'2022-09-03',
    where:'深圳',
    address: '厦门',
    timet:'2012',
    ddzt:'审批中',
  },
  {
    name: ' CLSQ2020010011',
    steta:'-',
    sex:'2022-09-02',
    where:'厦门',
    address: '长沙',
    timet:'1008',
    ddzt:'审批中',
  },
  {
    name: ' CLSQ2020010011',
    steta:'-',
    sex:'2022-08-20',
    where:'北京',
    address: '岳阳',
    timet:'2028',
    ddzt:'审批中',
  },

  {
    name: ' CLSQ2020010011',
    steta:'-',
    sex:'2022-08-15',
    where:'上海',
    address: '汕头',
    timet:'2008',
    ddzt:'审批中',
  }
]
const {total,pageNo,pageSize} = toRefs(d);
</script>

<style scoped>
.tbUpDiv{
  width: 100%;
  border-top: 2px solid gainsboro;
  border-bottom: 1px solid gainsboro;

  position: relative;
}
.tbScenCdiv{
  /*position: relative;*/
  /*left: 400px;*/
  /*top: -69px;*/
  font-size: 20px;
  margin: 10px 10px;
  /*width: 400px;*/
}
.tbImg{
  margin-left: 30px;
  margin-top: 15px;
}
.tbScenBipt{
  width:100px;

}
.tbUpPost{
  position: relative;
  top: -19px;
  left: 20px;
}
.aaa{
  display:flex;
}
.tj{
  display:flex;
  margin: 5px 10px;

}
.tjj-1{
  position: relative;
  left: 800px;
}
.tjj-2{
  position: relative;
  left: 830px;
}

.tjj{
  margin:10px 20px;
}
.tbScenAipt{
  width: 150px;
  height: 30px;
  border: 1px solid black;
}
.tbScenDdiv{
  /*position: relative;*/
  /*left: 660px;*/
  /*top: -98px;*/
  font-size: 14px;
  /*width: 400px;*/

}
.tbFirstBu{
  height: 45px;
  /*margin-left: 100px;*/
  /*margin-top: -54px;*/
}

</style>